<template>
	<view>
		<view class="top">
			<!-- 个人信息 -->
			<view class="top-details">
				<!-- 头像 -->
				<view class="top-left">
					<image :src="item.userImage" mode="" class="top-left-Image"></image>
				</view>
				<!-- 用户信息 -->
				<view class="top-right">
					<view class="top-right-name">{{item.userName}}</view>
					<view class="top-right-iPhone">小红书号：{{item.bookiPhone}}</view>
					<view class="top-right-down">
						<view class="top-right-down-sex">
							<image src="../../static/性别男.png" mode="" v-if="item.sex==1"
								style="width: 40rpx;height: 40rpx;"></image>
							<image src="../../static/性别女.png" mode="" v-else style="width: 40rpx;height: 40rpx;">
							</image>
						</view>
						<view class="top-right-down-Copywriting">{{item.signature}}</view>
					</view>
				</view>
			</view>
			<!-- 简介 -->
			<view class="center-introduction">
				<text v-if="item.introduction.length==0">还没有简介</text>
				<text v-else>{{item.introduction}}</text>
				<view class="infomation" @click.stop="update(userId)">
					编辑资料
				</view>
			</view>
			<!-- 获赞、粉丝、关注信息 -->
			<view class="bottom-love">
				<view class="bottom-love-left">
					<text class="bottom-love-colomn">{{item.followers}}</text>
					<text class="bottom-love-text">关注</text>
				</view>
				<view class="bottom-love-center">
					<text class="bottom-love-colomn">{{item.fans}}</text>
					<text class="bottom-love-text">粉丝</text>
				</view>
				<view class="bottom-love-right">
					<text class="bottom-love-colomn">{{item.collections}}</text>
					<text class="bottom-love-text">获赞与收藏</text>
				</view>
			</view>
		</view>
		<view class="down">
			<view class="down-top">
				<custom-tabs type="c1" :value="value" @change="changeIndex" tabCenter="true" tabSpacing="80"
					:defaultTextStyle="{color:'#c0c0c0'}">
					<custom-tab-pane label="收藏" name="c1_1">

						<!-- 收藏的帖子区域 -->
						<view class="view-post">
							<!-- 左侧列表区域 -->
							<view class="view-post-son-left">
								<view class="view-post-son-item" v-for="(items, i) in list" :key="items.postId"
									v-if="i % 2 == 0" @click="navagators(items.postId)">
									<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
										mode="widthFix">
									</image>

									<rich-text class="text-ellipsis-left">
										<span class="text-ellipsis-left-span">{{ items.title }}</span>
									</rich-text>
									<view class="Love-control-left">
										<view class="control-left">
											<view class="control-left-view">
												<image class="control-left-image" :src="items.userImage" mode="">
												</image>
											</view>
											<text class="control-left-text">{{items.userName}}</text>
										</view>
										<view class="aa" @click.stop="add(items)">
											<uni-icons class="Love-control-left-box" type="heart" size="20"
												v-if="items.loveCount<=0"></uni-icons>
											<uni-icons color="red" class="Love-control-left-box" type="heart-filled"
												size="20" v-else></uni-icons>
											<text
												class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>

							<!-- 右侧列表区域 -->
							<view class="view-post-son-left">
								<view class="view-post-son-item" v-for="(items, i) in list" :key="items.postId"
									v-if="i % 2 != 0" @click="navagators(items.postId)">
									<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
										mode="widthFix"></image>
									</image>

									<rich-text class="text-ellipsis-left">
										<span class="text-ellipsis-left-span">{{ items.title }}</span>
									</rich-text>
									<view class="Love-control-left">
										<view class="control-left">
											<view class="control-left-view">
												<image class="control-left-image" :src="items.userImage" mode="">
												</image>
											</view>
											<text class="control-left-text">{{items.userName}}</text>
										</view>
										<view class="aa" @click.stop="add(items)">
											<uni-icons class="Love-control-left-box" type="heart" size="20"
												v-if="items.loveCount<=0"></uni-icons>
											<uni-icons color="red" class="Love-control-left-box" type="heart-filled"
												size="20" v-else></uni-icons>
											<text
												class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</custom-tab-pane>
					<custom-tab-pane label="笔记" name="c1_2">
						<!-- 笔记帖子区域 -->
						<view class="view-post">
							<!-- 左侧列表区域 -->
							<view class="view-post-son-left">
								<view class="view-post-son-item" v-for="(items, i) in list" :key="items.postId"
									v-if="i % 2 == 0" @click="navagators(items.postId)">
									<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
										mode="widthFix">
									</image>

									<rich-text class="text-ellipsis-left">
										<span class="text-ellipsis-left-span">{{ items.title }}</span>
									</rich-text>
									<view class="Love-control-left">
										<view class="control-left">
											<view class="control-left-view">
												<image class="control-left-image" :src="items.userImage" mode="">
												</image>
											</view>
											<text class="control-left-text">{{items.userName}}</text>
										</view>
										<view class="aa" @click.stop="add(items)">
											<uni-icons class="Love-control-left-box" type="heart" size="20"
												v-if="items.loveCount<=0"></uni-icons>
											<uni-icons color="red" class="Love-control-left-box" type="heart-filled"
												size="20" v-else></uni-icons>
											<text
												class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>

							<!-- 右侧列表区域 -->
							<view class="view-post-son-left">
								<view class="view-post-son-item" v-for="(items, i) in list" :key="items.postId"
									v-if="i % 2 != 0" @click="navagators(items.postId)">
									<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
										mode="widthFix"></image>
									</image>

									<rich-text class="text-ellipsis-left">
										<span class="text-ellipsis-left-span">{{ items.title }}</span>
									</rich-text>
									<view class="Love-control-left">
										<view class="control-left">
											<view class="control-left-view">
												<image class="control-left-image" :src="items.userImage" mode="">
												</image>
											</view>
											<text class="control-left-text">{{items.userName}}</text>
										</view>
										<view class="aa" @click.stop="add(items)">
											<uni-icons class="Love-control-left-box" type="heart" size="20"
												v-if="items.loveCount<=0"></uni-icons>
											<uni-icons color="red" class="Love-control-left-box" type="heart-filled"
												size="20" v-else></uni-icons>
											<text
												class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</custom-tab-pane>
				</custom-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前页数
				page: 1,
				size: 10,
				total: 0,
				//登录用户id
				userId: 1,
				//tabar标签页选中项下标
				value: 1,
				//用户数据
				item: {
					introduction: ""
				},
				// 帖子展示数据
				list: []
			}
		},
		onLoad(options) {
			this.user(this.userId);
			this.collect();
			if (options.refresh) {
				this.refreshPage();
			}
		},
		onReady() {},
		methods: {
			refreshPage() {
				this.user(this.userId);
			},
			//解析获取对应的图片路径
			getImagePath(imageArray) {
				if (Array.isArray(imageArray) && imageArray.length > 0) {
					return imageArray[0].filePath;
				}
				return ''; // 或者默认的图片路径
			},
			//点击帖子后跳转到对应的帖子页面去
			navagators(postId) {
				uni.navigateTo({
					url: '/subpkg/Post_details/Post_details?postId=' + postId + '&userId=' + this.userId
				})
			},
			//根据用户id查询对应的用户数据
			async user(userId) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/list', {
					userId: userId
				})
				if (res.code !== 200) return uni.$ShowMsg("用户数据获取失败！");

				this.item = []
				this.item = res.data;
				this.$set(this.item,"bookiPhone",res.data.bookiPhone)
				this.$set(this.item,"collections",res.data.collections)
				this.$set(this.item,"fans",res.data.fans)
				this.$set(this.item,"followers",res.data.followers)
				this.$set(this.item,"introduction",res.data.introduction)
				this.$set(this.item,"sex",res.data.sex)
				this.$set(this.item,"signature",res.data.signature)
				this.$set(this.item,"userImage",res.data.userImage)
				this.$set(this.item,"userName",res.data.userName)

			},
			//点赞相关的逻辑
			async add(items) {
				const _this = this;
				const _items = items;
				if (items.loveCount == 1) {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/delete', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						// 将对应的点赞数减1
						_this.likeCountDelete(items, _items.postId, _items.likeCount);

					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/add', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						//将对应的点赞数加1
						_this.likeCountAdd(items, _items.postId, _items.likeCount);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},


			//将点赞数减1
			async likeCountDelete(items, postId, likeCount) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountDelete', {
					postId: postId,
					likeCount: likeCount - 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("取消失败，数据异常！");
				} else {
					this.$set(items, 'loveCount', 0);
					this.$set(items, 'likeCount', items.likeCount - 1);
				}
			},
			//将点赞数加1
			async likeCountAdd(items, postId, likeCount) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountAdd', {
					postId: postId,
					likeCount: likeCount + 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("点赞失败，数据异常！");
				} else {
					this.$set(items, 'loveCount', 1);
					this.$set(items, 'likeCount', items.likeCount + 1);
				}
			},


			//上拉刷新收藏数据
			async collect(cb) {
				const _this = this
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/postList', {
					userId: _this.userId,
					page: _this.page
				})
				if (res.code === 200) return uni.$ShowMsg("收藏数据获取失败！");
				if (typeof cb === 'function') {
					cb();
				}
				this.list = res.data;
			},

			//上拉刷新笔记数据
			async note(cb) {
				const _this = this
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/noteList', {
					userId: _this.userId,
					page: _this.page
				})
				if (res.code !== 200) return uni.$ShowMsg("收藏数据获取失败！");
				if (typeof cb === 'function') {
					cb();
				}
				this.list = res.data;
			},


			//根据用户id查询对应的收藏作品
			async collects(userId, page) {
				const _this = this
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/postList', {
					userId: userId,
					page: page
				})
				if (res.code !== 200) return uni.$ShowMsg("收藏数据获取失败！");
				if (typeof cb === 'function') {
					cb();
				}
				this.list = [...this.list, ...res.data];
			},
			//根据用户id查询对应的笔记作品
			async notes(userId, page) {
				const _this = this
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/noteList', {
					userId: userId,
					page: page
				})
				if (res.code !== 200) return uni.$ShowMsg("笔记数据获取失败！");
				if (typeof cb === 'function') {
					cb();
				}
				this.list = [...this.list, ...res.data];
			},

			//tabar标签页切换事件
			changeIndex(e) {
				this.value = e.value;
				let userId = this.userId;
				let page = this.page;
				//根据选中不同的选项请求不同的数据
				if (this.value == 0) {
					this.collect();
				} else if (this.value == 1) {
					this.note();
				}
			},

			//跳转到编辑资料页面
			update(userId) {
				uni.navigateTo({
					url: '/subpkg/update_user/update_user?userId=' + userId
				})
			}
		},
		//触底的事件
		onReachBottom() {

			let userId = this.userId;
			let page = this.page;
			//判断是否还有下一页数据
			if (this.page * this.size >= this.total)
				return uni.$ShowMsg('数据加载完毕！')

			//判断是否正在请求其他数据，如果是，则不发起额外的请求
			if (this.isloading) return
			//让页码值自增+1
			this.page += 1
			//重新获取列表数据
			//根据选中不同的选项请求不同的数据
			if (this.value == 0) {
				this.collects(userId, page);
			} else if (this.value == 1) {
				this.notes(userId, page);
			}
		},
		onPullDownRefresh() {
			//重置关键数据
			this.page = 1
			this.total = 0
			this.isloading = false
			this.list = []
			//重新发起数据请求
			if (this.value === 0) {
				this.collect(() => uni.stopPullDownRefresh())
			} else {
				this.note(() => uni.stopPullDownRefresh())
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 100%;
		height: 730rpx;
		padding-top: 1px;
		background: linear-gradient(to bottom, #0e1c21, #7A6E69);

		.top-details {
			width: 100%;
			height: 220rpx;
			margin-top: 190rpx;
			display: flex;


			.top-left {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;

				.top-left-Image {
					width: 190rpx;
					height: 190rpx;
					border-radius: 50%;

				}
			}

			.top-right {
				width: 70%;
				display: flex;
				flex-direction: column;

				.top-right-name {
					height: 100rpx;
					color: #fff;
					align-items: center;
					line-height: 140rpx;
					font-size: 46rpx;
					font-weight: 700;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
				}

				.top-right-iPhone {
					font-size: 24rpx;
					color: #fff;
				}

				.top-right-down {
					display: flex;
					align-items: center;


					.top-right-down-sex {
						margin-top: 8rpx;
						margin-right: 18rpx;
					}

					.top-right-down-Copywriting {
						font-size: 24rpx;
						color: #fff;
					}
				}
			}
		}

		.center-introduction {
			height: 80rpx;
			font-size: 28rpx;
			padding-left: 24rpx;
			color: #fff;
			// background-color: aqua;
			display: flex;
			align-items: center;


			.infomation {
				width: 140rpx;
				height: 20px;
				border: 1px solid #fff;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 20px;
				font-size: 24rpx;
				margin-left: auto;
				margin-right: 30rpx;
			}

		}

		.bottom-love {
			height: 120rpx;
			display: flex;
			align-items: center;

			.bottom-love-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 30rpx;

				.bottom-love-colomn {
					font-weight: 700;
					color: #fff;
				}

				.bottom-love-text {
					font-size: 26rpx;
					color: #fff;
				}
			}

			.bottom-love-center {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 30rpx;

				.bottom-love-colomn {
					font-weight: 700;
					color: #fff;
				}

				.bottom-love-text {
					font-size: 26rpx;
					color: #fff;
				}
			}

			.bottom-love-right {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-left: 30rpx;

				.bottom-love-colomn {
					font-weight: 700;
					color: #fff;
				}

				.bottom-love-text {
					font-size: 26rpx;
					color: #fff;
				}
			}
		}
	}

	.down {
		padding-top: 1px;
		background-color: rgb(245, 248, 250);
		border-radius: 20px 20px 0 0;
		width: 100%;
		height: 500px;
		margin-top: -50px;

		.down-top {
			height: 100rpx;
			background-color: #fff;
			border-radius: 20px 20px 0 0;


			.view-post {
				width: 750rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: flex-start; // 添加这一行

				//左侧列表内容样式
				.view-post-son-left {

					width: 48%; // 修改为百分比
					margin: 2% 1%;
					background-color: azure;

					// height: 2000px;

					.view-post-son-item {

						width: 100%;
						margin-bottom: 10rpx;

						.view-post-son-image-left {
							border-radius: 4% 4% 0 0;
							width: 100%;
							// height: auto;
						}

						.text-ellipsis-left {
							.text-ellipsis-left-span {
								font-size: 28rpx;
								padding: 4px 10rpx;
								display: block;
								white-space: normal;
								/* 修改为normal */
								word-wrap: break-word;
								/* 添加word-wrap属性 */

							}
						}

						.Love-control-left {
							width: 100%;
							height: 30px;
							position: relative;
							display: flex;

							.control-left {
								width: 70%;
								height: 30px;
								display: flex;
								align-items: center;
								justify-content: flex-start;

								.control-left-view {
									width: 20%;
									display: flex;
									align-items: center;
									justify-content: center;

									.control-left-image {
										width: 40rpx;
										height: 40rpx;
										border-radius: 50%;
										margin-left: 10rpx;
										margin-right: 5rpx;
									}
								}


								.control-left-text {
									font-size: 20rpx;
									font-family: Arial, Helvetica, sans-serif;

									color: #444;
									white-space: nowrap;
									/* 禁止换行 */
									overflow: hidden;
									/* 隐藏溢出部分 */
									text-overflow: ellipsis;
									/* 用省略号代替溢出部分 */
								}
							}

							.Love-control-left-box {
								position: absolute;
								top: 50%;
								right: 17%;
								transform: translateY(-50%);
							}

							.Love-control-left-text {
								font-size: 24rpx;
								position: absolute;
								top: 50%;
								left: 83%;
								transform: translateY(-50%);
							}
						}
					}
				}
			}
		}
	}
</style>